<script>
export default {
  name: 'Forget',
  setup() {
    const onBack = () => history.back();
    return {
      onBack,
    }
  },
  methods: {
    sendCode() {
      // if(/^1[3456789]\d{9}$/.test(this.phone)){
      //   //请求接口返回验证码
      //   getCodeNumber({
      //     phone: this.phone,
      //   }).then(res => {
      //     this.getCode = res.data.sn;
      //     console.log(res, "-------------")
      //   })
      //   this.codeMsg = '獲取驗證碼（' + this.codeNum + '）';
      //   this.disabled = true;
      //   let timer = setInterval(() => {
      //     --this.codeNum;
      //     this.codeMsg = '重新发送（' + this.codeNum + '）';
      //   }, 1000);
      //   setTimeout(() => {
      //     clearInterval(timer);
      //     this.codeNum = 60;
      //     this.disabled = false;
      //     this.codeMsg = '重新发送';
      //   }, 60000)
      // }else{
      //   uni.showToast({
      //     title:"手机号格式错误"
      //   })
      // }

    }
  }
}
</script>

<template>
  <div class="">
    <van-nav-bar
        title=""
        :border=false
        class="nav-bar"
    >
      <template #left>
        <van-icon :name="require('./../../assets/ic_back.png')" size="18" @click="onBack"/>
      </template>
    </van-nav-bar>
    <div class="text_1">
      <text class="text_2">{{$t('msg.registerStr1')}}</text>
    </div>

    <div class="input_1 flex-row">
      <div class="">
        <text class="text_4">+86</text>
        <van-image class="icon_1" :src="require('./../../assets/ic_login_arrow_below.png')"/>
      </div>
      <input class="text_3" :placeholder="$t('msg.registerStr2')" style="width: 98px; height: 20px" v-model="phone"
             maxlength="15" type="tel"/>
    </div>
    <div class="input_2 flex-row justify-between">
      <input name="newPassword1" class="text_3" type="passWord" :placeholder="$t('msg.registerStr3')" v-model="passWord"/>
    </div>
    <div class="input_2 flex-row justify-between">
      <input name="newPassword2" class="text_3" type="passWord" :placeholder="$t('msg.registerStr4')" v-model="passWord"/>
    </div>
    <div class="input_2 flex-row justify-between">
      <input class="text_3" :placeholder="$t('msg.registerStr5')" style="width: 84px; height: 20px"
             v-model="getCode"/>
      <button class="button_2 center" @click='sendCode()'>{{$t('msg.registerStr6')}}</button>
    </div>
    <div class="text-wrapper">
      <button class="button_1 center" type="primary" @click="submit()">{{$t('msg.registerStr7')}}</button>
    </div>
  </div>
</template>

<style scoped>
.text_1 {
  margin-top: 140px;
}

.text_2 {
  font-size: 30px;
  font-weight: 600;
  color: #000000;
  line-height: 42px;
}

.text_3 {
  overflow-wrap: break-word;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-left: 16px;
  border: none;
  outline: none;
  background: transparent;
  color: #000000;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  line-height: 20px;
  ::placeholder{
    color: #A8A8A8;
  }
}

.text_4 {
  width: 26px;
  height: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  line-height: 18px;
}

.input_1 {
  height: 52px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 0 20px 0 20px;
  margin: 60px 30px 20px 30px;

}

.input_2 {
  height: 52px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 0 20px 0 20px;
  margin: 15px 30px 10px 30px;

}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon_1 {
  width: 8px;
  height: 5px;
  margin-left: 4px;
  align-items: center;

}

.button_2 {
  width: 96px;
  height: 32px;
  border-radius: 26px;
  border: 1px solid #AB9263;
  background: #FFFFFF;
  font-size: 13px;
  color: #AB9263;
}

.button_1 {
  margin-top: 20px;
  width: 353px;
  height: 48px;
  background: #AB9263;
  border-radius: 24px;
  border: none;
  font-size: 17px;
  color: #FFFFFF;
}

.text-wrapper {
  text-align: center;
  margin-top: 20px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>
